<template>
<div>
  <el-row>
    <el-col :span="24">
      <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>创建收款单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    </el-col>
  </el-row>
  <div style="height:20px;width:100%"></div>
  <div class="mainContainer addCompanyPage">
  <el-row>
  <div style="height:50px;width:100%"></div>
  <el-row :gutter="20">
    <el-col :span="20" :offset="3">
      <div class="grid-content bg-purple">
        <div class="grid-content bg-purple-light">
          <el-steps :active="active" finish-status="success">
            <el-step title="客户选择"></el-step>
            <el-step title="社保/公积金/商保"></el-step>
            <el-step title="薪酬个税"></el-step>
            <el-step title="附加费/服务费"></el-step>
          </el-steps>
          <el-form ref="form" :model="form" label-width="80px">
            <div v-if="active === 0">
              <div style="height:50px;width:100%"></div>
              <el-form-item label="结算业务" >
                <el-radio-group v-model="form.resource">
                  <el-radio label="1" >社保/公积金/商保</el-radio>
                  <el-radio label="2" >薪酬个税</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="客户名称" prop="name" :rules="[
                    { required: true, message: '不能为空'}
                  ]">
                    <el-input type="name" v-model.number="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                <div style="width: 5px;height: 20px;"></div>
              </div></el-col>
<!--                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="收款日期">
                    <el-date-picker format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd" type="date" placeholder="年/月/日" v-model="form.timePay" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </div></el-col>-->
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="姓名" prop="username" :rules="[
                    { required: true, message: '不能为空'}
                  ]">
                    <el-input type="username" v-model.number="form.username" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8">
                  <el-form-item label="身份证号" prop="idCard" :rules="[
                    { required: true, message: '不能为空'},
                    { type: 'number', message: '必须为数字值'}
                  ]">
                    <el-input type="idCard" v-model.number="form.idCard" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-if="active === 1">
              <div style="height:50px;width:100%"></div>
              <el-row>
                <el-col :span="12"><div class="grid-content bg-purple">
                  <el-form-item label="方案名称">
                    <el-input v-model="form.plan" style="width: 100%;"></el-input>
                  </el-form-item>
                </div></el-col>
              </el-row>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="参保地">
                    <el-input v-model="form.area" style="width: 100%;"></el-input>
                  </el-form-item>
                </div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="参保日期">
                    <el-date-picker format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd" type="date" placeholder="年/月/日" v-model="form.jointime" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </div></el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <span style="font-size: 20px;padding-left: 20px;padding-bottom: 20px;height: 50px;">社保</span></div></el-col>
              </el-row>
              <div style="height:30px;width:100%"></div>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="代缴金额" prop="Sbase" :rules="[
                    { type: 'number', message: '必须为数字值'}
                  ]">
                    <el-input type="Sbase" v-model.number="form.Sbase" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="缴纳月份">
                    <el-date-picker format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd" type="date" placeholder="年/月/日" v-model="form.Stime" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </div></el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <span style="font-size: 20px;padding-left: 20px;padding-bottom: 20px;height: 50px;">公积金</span></div></el-col>
              </el-row>
              <div style="height:30px;width:100%"></div>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="代缴金额" prop="Abase" :rules="[
                    { type: 'number', message: '必须为数字值'}
                  ]">
                    <el-input type="Abase" v-model.number="form.Abase" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="缴纳月份">
                    <el-date-picker format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd" type="date" placeholder="年/月/日" v-model="form.Atime" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </div></el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <span style="font-size: 20px;padding-left: 20px;padding-bottom: 20px;height: 50px;">商保</span></div></el-col>
              </el-row>
              <div style="height:30px;width:100%"></div>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="代缴金额" prop="Cbase" :rules="[
                    { type: 'number', message: '必须为数字值'}
                  ]">
                    <el-input type="Cbase" v-model.number="form.Cbase" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="缴纳月份">
                    <el-date-picker format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd" type="date" placeholder="年/月/日" v-model="form.Ctime" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </div></el-col>
              </el-row>
            </div>
            <div v-if="active === 2">
              <div style="height:50px;width:100%"></div>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="账户名">
                    <el-input v-model="form.bankname" style="width: 100%;"></el-input>
                  </el-form-item>
                </div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8">
                  <el-form-item label="个税" prop="tax" :rules="[
                    { type: 'number', message: '必须为数字值'}
                  ]">
                    <el-input type="tax" v-model.number="form.tax" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="实发工资" prop="getMoney" :rules="[
                    { type: 'number', message: '必须为数字值'}
                  ]">
                    <el-input type="getMoney" v-model.number="form.getMoney" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="发放月份">
                    <el-date-picker type="date" placeholder="年/月/日" v-model="form.getTime" style="width: 100%;"format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </div></el-col>
              </el-row>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="发放银行">
                    <el-input v-model="form.bank" style="width: 100%;"></el-input>
                  </el-form-item>
                </div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <el-form-item label="银行卡号">
                    <el-input v-model="form.bankcard" style="width: 100%;"></el-input>
                  </el-form-item>
                </div></el-col>
              </el-row>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.info"></el-input>
              </el-form-item>
            </div>
            <div v-if="active === 3">
              <div style="height:50px;width:100%"></div>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="附加费" prop="otherPay" :rules="[
                    { required: true, message: '不能为空'},
                    { type: 'number', message: '必须为数字值'}
                  ]">
                    <el-input type="otherPay" v-model.number="form.otherPay" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                  <div style="width: 5px;height: 20px;"></div>
                </div></el-col>
                <el-col :span="8">
              <el-form-item label="服务费" prop="seriverPay" :rules="[
                    { required: true, message: '不能为空'},
                    { type: 'number', message: '必须为数字值'}
                  ]">
                    <el-input type="seriverPay" v-model.number="form.seriverPay" autocomplete="off" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <el-button style="margin-top: 12px;" @click="prev" v-if="active==1||active==2||active==3">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="next('form')" v-if="active==0||active==1||active==2">下一步</el-button>
          <el-button style="margin-top: 12px;" @click="test('form')" v-if="active==3">提交</el-button>
        </div>
      </div>
    </el-col>
  </el-row>
</el-row>
</div>
</div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "collectionList",
  data() {
      return {
        active: 0,
         form: {
          name: null,
           age:null,
           timePay: null,
          jointime: null,
           getTime: null,
          resource: '1',
          username: null,
           idCard: null,
          plan:null,
          area:null,
           getMoney:null,
          bank:null,
          bankname:null,
          bankcard:null,
          info: null,
           otherPay:null,
           seriverPay:null,
           Stime:null,
           Sbase:null,
           Atime:null,
           Abase:null,
           Ctime:null,
           Cbase:null,
           tax:null,
           creatPenson:JSON.parse(localStorage.user).user.name
        }
      };
    },
    methods: {
      next(formName) {
        console.log(this.$refs[formName]);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.active++ > 3) this.active = 0;
            if (this.form.resource == 2 && this.active == 1) this.active = 2;
            if (this.form.resource == 1 && this.active == 2) this.active = 3;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      prev() {
        --this.active;
        if (this.active < 0) this.active = 0;
        if (this.form.resource == 2 && this.active == 1) this.active = 0;
        console.log(this.active);
      },
      onSubmit() {
        console.log('submit!');
      },
      test: function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            Http.api.post("/test/v2",this.form).then(res => {
              this.$router.push("/collect/View");
              if(res.data==200){
                this.$notify({
                  title: '成功',
                  message: '提交成功',
                  type: 'success'
                });
              }else if(res.data==404){
                this.$notify.error({
                  title: '失败',
                  message: '提交失败'
                });
              }else {
                this.$notify({
                  title: '警告',
                  message: '用户数据已存在',
                  type: 'warning'
                });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
};
</script>
<style>
.el-step__head.is-success{
  color: #999;
  border-color: #999;
}
.el-step__title.is-success{
  color: #999;
}
</style>



